<!-- 轮播图管理页面 -->
<template>
  <el-button @click="drawer = true" v-if="crud.charAt(0) == '1'">添加轮播图</el-button>
  <el-divider />
  <el-table :data="bannerList" style="width: 100%">
    <el-table-column prop="bannerid" label="编号" width="180" />
    <el-table-column label="图片" width="180">
      <template #default="scope">
        <img class="img1" :src="scope.row.img" />
      </template>
    </el-table-column>
    <el-table-column prop="flag" label="是否启用" v-if="crud.charAt(2) === '1'">
      <template #default="scope">
        <el-switch v-model="scope.row.flag" />
      </template>
    </el-table-column>
    <el-table-column prop="link" label="跳转连接">
      <template #default="scope">
        <el-link :href="scope.row.link" target="_blank">跳转连接</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="alt" label="图片提示" />
    <el-table-column prop="alt" label="操作" v-if="crud.charAt(1) === '1'">
      <template #default="scope">
        <el-button type="danger" @click="deletebanner(scope.row.bannerid)">删除</el-button>
      </template> </el-table-column>
  </el-table>
  <!-- 抽屉 -->
  <el-drawer v-model="drawer" title="添加轮播图" :direction="direction" :before-close="handleClose">
    <AddBanner @close="closeDrawer" />
  </el-drawer>
</template>

<script lang="ts" setup>
import { getBannerApi, getDeleteBannerApi } from "../../../api/Banner";
import { reactive, ref } from "vue";
import { ElMessageBox } from "element-plus";
import AddBanner from "./AddBanner.vue"; //抽屉内容组件
import type { IBanner } from "@/MyTs"; //ts类型
import { useRoute } from "vue-router";

const $route = useRoute();
//获取router中的按钮权限数据
const crud: string = $route.meta.crud as string


//获取轮播图数据
const bannerList = reactive([]);
function getBannerList() {
  getBannerApi()
    .then((res) => {
      if (res.data.code == 200) {
        bannerList.length = 0;
        bannerList.push(...res.data.data);
      }
    })
    .catch((err) => {
      console.log("请求错误");
    });
}
//删除轮播图

function deletebanner(bannerid: string) {
  getDeleteBannerApi({ bannerid })
    .then((res) => {
      if (res.data.code == 200) {
        ElMessageBox.alert("删除成功", "提示", {
          confirmButtonText: "确定",
        });
        getBannerList();
      }
    })
    .catch((err) => {
      console.log("请求错误");
    });
}
//调用函数获取轮播图数据
getBannerList();
//添加相关
const drawer = ref(false);
const direction = ref("rtl");
//关闭抽屉
const closeDrawer = () => {
  drawer.value = false;
  getBannerList();
};

const addBannerRef = ref();
//抽屉组件的关闭事件
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("亲，您真的要关闭吗？")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
      console.log("点了取消");
    });
};
</script>

<style lang="scss" scoped>
.img1 {
  width: 150px;
  height: 100px;
}
</style>
